<template>
  <div class="menu-box">
    <div class="menu-label">组件</div>
    <div class="menu-item" v-for="item in menuList" :key="item.label">
      <div
        class="menu-icon-box"
        draggable="true"
        @dragend="dragend($event, item, graphData)"
      >
        <img
          class="menu-icon menu-user"
          v-if="item.nodeKey === 'ATTR_USER_NONE'"
          :src="item.base64"
        />
        <div v-else class="menu-icon" :class="item.class"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { dragend } from '../common';
import { userImgNotSelectAttr } from '../register/common';
const props = defineProps({
  graphData: {
    type: Object,
    default: () => {}
  }
});
const menuList = ref([
  { lable: '桌子-横', nodeKey: 'ATTR_DESK_THREE', class: 'menu-zhuozi-heng' },
  { lable: '桌子-竖', nodeKey: 'ATTR_DESK_THREE_2', class: 'menu-zhuozi-shu' },
  {
    lable: '会议室',
    nodeKey: 'ATTR_ROOM_NONE',
    class: 'menu-huiyishi-heng'
  },
  { lable: '占位-横', nodeKey: 'ATTR_DOOR_NONE', class: 'menu-men-heng' },
  { lable: '占位-竖', nodeKey: 'ATTR_DOOR_NONE_2', class: 'menu-men-shu' },
  {
    lable: '占位-左斜',
    nodeKey: 'ATTR_LEFT_DOOR_NONE',
    class: 'menu-men-zuoxie'
  },
  {
    lable: '占位-右斜',
    nodeKey: 'ATTR_RIGHT_DOOR_NONE',
    class: 'menu-men-youxie'
  },
  { lable: '圆', nodeKey: 'ATTR_CIRCLE_NONE', class: 'menu-yuan' }
]);

if (props.graphData.canvasRoom === 'detail') {
  menuList.value.unshift({
    lable: '工位',
    nodeKey: 'ATTR_USER_NONE',
    base64: userImgNotSelectAttr.img,
    class: 'menu-gongwei'
  });
}
</script>

<style lang="scss" scoped>
.menu-box {
  left: 10px;
  top: 10px;
  user-select: none;
  width: 100px;
  text-align: center;
  line-height: 30px;
  color: #008080;
  border: 1px solid #7fbfbf;
  background-color: #fff;
  margin-left: 14px;
}
.menu-item {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.menu-label {
  width: 100%;
  background-color: #7fbfbf;
  font-size: 14px;
}
.menu-icon {
  box-sizing: border-box;
  border: 2px solid #aaa;
  transition: all 0.1s;
}
.menu-user {
  width: 40px;
  height: 40px;
  border: none;
}
.menu-zhuozi-heng {
  width: 50px;
  height: 15px;
}
.menu-zhuozi-shu {
  width: 15px;
  height: 50px;
}
.menu-gongwei {
  width: 20px;
  height: 20px;
}
.menu-huiyishi-heng {
  width: 50px;
  height: 50px;
}
// .menu-huiyishi-shu {
//   width: 40px;
//   height: 50px;
// }
.menu-men-heng {
  width: 50px;
  height: 5px;
  background-color: #aaa !important;
}
.menu-men-shu {
  width: 5px;
  height: 50px;
  background-color: #aaa !important;
}
.menu-men-zuoxie {
  width: 5px;
  height: 50px;
  background-color: #aaa !important;
  transform: rotate(45deg);
}
.menu-men-youxie {
  width: 5px;
  height: 50px;
  background-color: #aaa !important;
  transform: rotate(315deg);
}
.menu-yuan {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.menu-icon-box {
  margin-top: 14px;
  padding: 5px 0;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  &:hover {
    .menu-icon {
      border-color: #008080;
      background-color: #eee;
    }
    .menu-men-heng {
      background-color: #008080 !important;
    }
    .menu-men-shu {
      background-color: #008080 !important;
    }
  }
}
</style>
